import {mSelectProductFileByPage} from '@/api/others'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {filterOption} from '@/libs/toolkit'
import {PropType} from 'vue'

/**监测参数选择框 */
export const ParamSelect = defineComponent({
  props: {
    code: String,
    name: String,
    lazy: {
      type: Boolean,
      default: true
    },
    disabled: Boolean
  },
  emits: {
    'update:code': (val: string): Boolean => true,
    'update:name': (val: string): Boolean => true
  },
  setup(props, {emit}) {
    const {store} = useGlobalAPI()

    const checkParamList = computed(() => store.getters['device/checkParamList'])

    /**获取所有检测参数 */
    const getAllCheckParam = () => {
      store.dispatch('device/updateAllCheckParam')
    }

    onMounted(() => {
      if (props.lazy) {
        if (!checkParamList.value.length) {
          getAllCheckParam()
        }
      }
    })
    return () => (
      <a-select
        value={props.code}
        disabled={props.disabled}
        fieldNames={{
          label: 'dictName',
          value: 'dictCode'
        }}
        placeholder='选择监测参数'
        options={checkParamList.value}
        show-search
        filter-option={(input: string, option: SysDict.Item) =>
          filterOption(input, option, 'dictName')
        }
        onFocus={getAllCheckParam}
        onSelect={(val: string) => {
          emit('update:code', val)
          let name = checkParamList.value.find(item => item.dictCode === val)?.dictName
          emit('update:name', name || '')
        }}
      ></a-select>
    )
  }
})

/**操作位选择框 */
export const NumMadeSelect = defineComponent({
  props: {
    code: Number,
    disabled: Boolean
  },
  emits: {
    'update:code': (val: number): Boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{list: ModbusNumMadeList}>({
      list: [
        {
          label: 0,
          value: 0
        },
        {
          label: 10,
          value: 10
        },
        {
          label: 100,
          value: 100
        },
        {
          label: 1000,
          value: 1000
        },
        {
          label: 10000,
          value: 10000
        },
        {
          label: 100000,
          value: 100000
        }
      ]
    })
    return () => (
      <a-select
        v-model={[props.code, 'value']}
        disabled={props.disabled}
        placeholder='选择操作位'
        options={state.list}
        show-search
        allowClear
        filter-option={(input: string, option: SysDict.Item) =>
          filterOption(input, option, 'label')
        }
        onSelect={(val: number) => {
          emit('update:code', val)
        }}
      ></a-select>
    )
  }
})

/**数据类型选择框 */
export const DataTypeSelect = defineComponent({
  props: {
    code: String,
    disabled: Boolean
  },
  emits: {
    'update:code': (val: string): Boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{list: ModbusDataTypeList}>({
      list: [
        {
          label: 'FLOAT',
          value: 'FLOAT'
        },
        {
          label: 'INT',
          value: 'INT'
        },
        {
          label: 'LONG',
          value: 'LONG'
        }
      ]
    })
    return () => (
      <a-select
        v-model={[props.code, 'value']}
        disabled={props.disabled}
        placeholder='选择数据类型'
        options={state.list}
        show-search
        allowClear
        filter-option={(input: string, option: SysDict.Item) =>
          filterOption(input, option, 'label')
        }
        onSelect={(val: string) => {
          emit('update:code', val)
        }}
      ></a-select>
    )
  }
})

/**字节序选择框 */
export const ByteTypeSelect = defineComponent({
  props: {
    code: String,
    disabled: Boolean
  },
  emits: {
    'update:code': (val: string): Boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{list: ModbusByteTypeList}>({
      list: [
        {
          label: '大端大端',
          value: 'BB'
        },
        {
          label: '大端小端',
          value: 'BL'
        },
        {
          label: '小端小端',
          value: 'LL'
        },
        {
          label: '小端大端',
          value: 'LB'
        }
      ]
    })
    return () => (
      <a-select
        v-model={[props.code, 'value']}
        disabled={props.disabled}
        placeholder='选择字节序'
        options={state.list}
        show-search
        allowClear
        filter-option={(input: string, option: SysDict.Item) =>
          filterOption(input, option, 'label')
        }
        onSelect={(val: string) => {
          emit('update:code', val)
        }}
      ></a-select>
    )
  }
})

/**产品资料选择框 */
export const ProductFileSelect = defineComponent({
  name: 'InstructionSelect',
  props: {
    fileId: Number,
    fileName: String,
    fileUrl: String,
    files: Array,
    mode: String as PropType<'multiple' | 'tags' | 'combobox'>,
    fileType: {
      type: String,
      default: '0045',
      required: true
    }
  },
  emits: {
    'update:fileId': (val: number | null): Boolean => true,
    'update:fileName': (val: string): Boolean => true,
    'update:fileUrl': (val: string): Boolean => true,
    'update:files': (val: ProductFile.DataSource[]): Boolean => true,
    selectChange: (val: ProductFile.DataSource | ProductFile.DataSource[]): Boolean => true
  },
  setup(props, {emit}) {
    type Option = ProductFile.DataSource

    let state = reactive<{list: Option[]; select?: number}>({
      list: [],
      select: undefined
    })

    /**获取所有检测参数 */
    const getInstructionList = async (name: string) => {
      let res = await mSelectProductFileByPage({
        page: 1,
        size: 99999,
        fileTypeCode: props.fileType,
        fileName: ''
      }).catch(() => {})
      if (res) {
        state.list = res.data.list
      }
    }
    watch(
      () => props.fileUrl,
      n => {
        if (!n) state.select = undefined
      }
    )
    return () => (
      <a-select
        v-model={[state.select, 'value']}
        fieldNames={{
          label: 'fileName',
          value: 'fileId'
        }}
        mode={props.mode || ''}
        allowClear
        placeholder='选择产品资料'
        options={state.list}
        show-search
        filter-option={(input: string, option: Option) => filterOption(input, option, 'fileName')}
        onFocus={getInstructionList}
        onChange={(val: number, option: Option | Option[]) => {
          console.log('下拉框 产品资料选择变化', option)
          if (Array.isArray(option)) {
            emit('update:files', option)
          } else {
            let fileName = option ? option.fileName : ''
            let fileUrl = option ? option.fileUrl : ''
            let fileId = option ? option.fileId : null
            emit('update:fileId', fileId)
            emit('update:fileName', fileName)
            emit('update:fileUrl', fileUrl)
          }
          emit('selectChange', option)
        }}
      ></a-select>
    )
  }
})

/**操作视频选择框 */
export const OperateVideoSelect = defineComponent({
  name: 'OperateVideoSelect',
  props: {
    type: String as PropType<'fileId' | 'fileName' | 'fileUrl'>,
    fileId: Number,
    fileUrl: String,
    fileName: String
  },
  emits: {
    'update:fileId': (val: number | null): Boolean => true,
    'update:fileName': (val: string): Boolean => true,
    'update:fileUrl': (val: string): Boolean => true
  },
  setup(props, {emit}) {
    type Option = ProductFile.DataSource

    let state = reactive<{list: Option[]; select: number | null}>({
      list: [],
      select: null
    })

    watch(
      () => props.fileUrl,
      n => {
        if (!n) state.select = null
      }
    )

    /**获取所有操作视频 */
    const getInstructionList = async (name: string) => {
      mSelectProductFileByPage({
        page: 1,
        size: 99999,
        fileTypeCode: '0046',
        fileName: ''
      })
        .then(res => {
          state.list = res.data.list
        })
        .catch(() => {
          state.list = []
        })
    }

    return () => (
      <a-select
        v-model={[state.select, 'value']}
        fieldNames={{
          label: 'fileName',
          value: 'fileId'
        }}
        allowClear
        placeholder='选择视频'
        options={state.list}
        show-search
        filter-option={(input: string, option: Option) => filterOption(input, option, 'fileName')}
        onFocus={getInstructionList}
        onSelect={(val: number, option: Option) => {
          console.log('操作视频被选择', val, option)
          let fileName = option ? option.fileName : ''
          let fileUrl = option ? option.fileName : ''
          let fileId = option ? option.fileId : null
          emit('update:fileId', fileId)
          emit('update:fileName', fileName)
          emit('update:fileUrl', fileUrl)
        }}
      ></a-select>
    )
  }
})
